<!--
 * @Description  : 馆藏资料借阅利用统计 - 按资料类别统计
 * @Author       : zhao
 * @Date         : 2022-07-26 14:33:02
 * @LastEditors  : zhao
 * @LastEditTime : 2022-08-25 09:31:56
-->
<template>
    <div class='DistributionChart'>
        <h2 style="padding-bottom: 10px;">按资料类别统计</h2>
        <div>
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="日期">
                    <el-date-picker size=" small" v-model="state.datepicker" type="daterange" range-separator="-"
                        format="YYYY/MM/DD" value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="结束日期" />
                </el-form-item>
                <el-form-item label="所属行业">
                    <el-select v-model="state.profession" placeholder="请输入所属行业" size=" small" clearable>
                        <el-option v-for="item in state.professionData" :key="item.professionName"
                            :label="item.professionName" :value="item.professionName" />
                    </el-select>

                </el-form-item>
                <el-form-item>
                    <el-button size=" small" type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

        </div>
        <el-row :gutter="15" class="home-card-two mb15">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <el-card shadow="hover">
                    <div class="home-card-item">
                        <div style="position: absolute" v-if="ishomeLineRefOne">
                            <SvgIcon :name="'ele-ArrowLeftBold'" :size="15" style="position:relative;left:-10px;top:3px"
                                @click="back('查询量')" class="cursor" />
                        </div>
                        <div style="height: 100%" ref="homeLineRefOne"></div>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="home-media">
                <el-card shadow="hover">
                    <div class="home-card-item">
                        <div style="position: absolute" v-if="ishomeLineReftwo">
                            <SvgIcon :name="'ele-ArrowLeftBold'" :size="15" style="position:relative;left:-10px;top:3px"
                                @click="back('借阅量')" class="cursor" />
                        </div>
                        <div style="height: 100%" ref="homeLineReftwo">

                        </div>
                    </div>
                </el-card>
            </el-col>
            <!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="home-media">
                <el-card shadow="hover">
                    <div class="home-card-item">
                        <div style="position: absolute" v-if="ishomeLineReftwo">
                            <SvgIcon :name="'ele-ArrowLeftBold'" :size="15" style="position:relative;left:-10px;top:3px"
                                @click="back('借阅量')" class="cursor" />
                        </div>
                        <div style="height: 100%" ref="homeLineRefThree">

                        </div>
                    </div>
                </el-card>
            </el-col> -->
        </el-row>

        <ztrendChartYear />

        <vue3-json-excel style="display: none;" :json-data="state.execl_data" :fields="state.execl_fields"
            :name="state.execl_name" ref="downexcel">
        </vue3-json-excel>
    </div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts';
import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import ztrendChartYear from './trendChartYear.vue';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { useChart } from '/@/stores/chart';
import zpublic from '/@/utils/public.ts';
const { getSearchRecoreSA, getBrowsingRecoreSA, getProBrowsingSA, getProfession } = useChart();
//图实例
let global: any = {
    homeLineRefOne: null, //饼状图
    homeLineReftwo: null, //饼状图
    dispose: [null, '', undefined],
};


const downexcel = ref()
const ishomeLineRefOne = ref(false);
const ishomeLineReftwo = ref(false);
const ishomeLineRefOneTitle = ref("地质资料查询量统计");
const ishomeLineReftwoTitle = ref("档案借阅量趋势统计图");
const state = reactive({
    myCharts: [],
    charts: {
        theme: '',
        bgColor: '',
        color: '#303133',
    },

    //查询
    formline: {
        searchDateBegin: null,
        searchDateEnd: null,
        area: null,
        profession: null,
    },
    datepicker: [],
    area: [],
    profession: "",
    options: [],
    professionData: <any>[],

    execl_data: <any>[],//数据exlec
    execl_fields: <any>[],//数据exlec
    execl_name: <any>[],//数据exlec
});
const colorList = zpublic.chartColor

const storesTagsViewRoutes = useTagsViewRoutes();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
// 折线图
const homeLineRefOne = ref();
const initBarChart1 = (data: any) => {
    if (!global.dispose.some((b: any) => b === global.homeLineRefOne)) global.homeLineRefOne.dispose();
    global.homeLineRefOne = <any>echarts.init(homeLineRefOne.value, state.charts.theme);


    const option = {
        backgroundColor: state.charts.bgColor,
        title: {
            text: "查询量统计",
            x: 'left',
            textStyle: { fontSize: '15', color: state.charts.color },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            formatter: (val: any) => {
                let text = "类别：" + val[0].name + "<br />" + "查询量：" + val[0].data.yValue
                return text
            }
        },

        xAxis: {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: { interval: 0, rotate: 30 }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {

                type: 'bar',
                // barWidth: '50px',
            }
        ],
        dataset: {
            // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
            // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射。
            dimensions: ["profession", "yValue",],

            source: data,
        },
        toolbox: {
            // show: true,
            right: "20",
            feature: {
                saveAsImage: {
                    show: true,
                },

                myExcel: {
                    show: true,
                    title: "导出Excel",
                    icon: "image://",
                    onclick: (option: any) => {
                        state.execl_fields = {
                            类别: 'profession',
                            查询量: 'yValue',
                        }
                        state.execl_name = "查询量统计"
                        state.execl_data = data
                        setTimeout(() => {

                            downexcel.value.generate()
                        }, 100);
                    },
                },
            },
        },
    };
    (<any>global.homeLineRefOne).setOption(option);
    (<any>state.myCharts).push(global.homeLineRefOne);
    // (<any>global.homeLineRefOne).on('click', (params: any) => {
    //     getMonthNewAddBrowsingSA({ year: params.name }).then((res) => {
    //         if (ishomeLineRefOne.value) return
    //         ishomeLineRefOne.value = true
    //         ishomeLineRefOneTitle.value = params.name + "年馆藏资料月度新增统计"
    //         initBarChart1(res.data);
    //     })

    // })

};
// 柱图
const homeLineReftwo = ref();
const initBarChart2 = (data: any) => {
    if (!global.dispose.some((b: any) => b === global.homeLineReftwo)) global.homeLineReftwo.dispose();
    global.homeLineReftwo = <any>echarts.init(homeLineReftwo.value, state.charts.theme);


    const option = {
        backgroundColor: state.charts.bgColor,
        title: {
            text: "借阅量统计",
            x: 'left',
            textStyle: { fontSize: '15', color: state.charts.color },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            formatter: (val: any) => {
                let text = "类别：" + val[0].name + "<br />" + "借阅数：" + val[0].data.yValue
                return text
            }
        },

        xAxis: {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: { interval: 0, rotate: 30 }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {

                type: 'bar',
                // barWidth: '50px',

            }
        ],
        dataset: {
            // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
            // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射。
            dimensions: ["profession", "yValue",],

            source: data,
        },
        toolbox: {
            // show: true,
            right: "20",
            feature: {
                saveAsImage: {
                    show: true,
                },

                myExcel: {
                    show: true,
                    title: "导出Excel",
                    icon: "image://",
                    onclick: (option: any) => {
                        state.execl_fields = {
                            类别: 'profession',
                            借阅数: 'yValue',
                        }
                        state.execl_name = "借阅量统计"
                        state.execl_data = data
                        setTimeout(() => {

                            downexcel.value.generate()
                        }, 100);
                    },
                },
            },
        },
    };
    (<any>global.homeLineReftwo).setOption(option);
    (<any>state.myCharts).push(global.homeLineReftwo);


};
// 柱图
const initBarChart3 = (data: any) => {
    if (!global.dispose.some((b: any) => b === global.homeLineReftwo)) global.homeLineReftwo.dispose();
    global.homeLineReftwo = <any>echarts.init(homeLineReftwo.value, state.charts.theme);


    const option = {
        backgroundColor: state.charts.bgColor,
        title: {
            text: "地质资料借阅量统计",
            x: 'left',
            textStyle: { fontSize: '15', color: state.charts.color },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            formatter: (val: any) => {
                let text = "日期：" + val[0].name + "<br />" + "借阅数：" + val[0].data.value
                return text
            }
        },

        xAxis: {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {

                type: 'line',
                barWidth: '50px',

            }
        ],
        dataset: {
            // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
            // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射。
            dimensions: ["key", "value",],

            source: data,
        },
    };
    (<any>global.homeLineReftwo).setOption(option);
    (<any>state.myCharts).push(global.homeLineReftwo);


};
//查询
const onSubmit = () => {

    let obj = {
        searchDateBegin: state.datepicker ? state.datepicker[0] : null,
        searchDateEnd: state.datepicker ? state.datepicker[1] : null,
        profession: state.profession || ""
    }
    getSearchRecoreSA(obj).then((res) => {

        initBarChart1(res.data);
    })


    getBrowsingRecoreSA(obj).then((res) => {

        initBarChart2(res.data);
    })
}
const back = (val: any) => {
    if (val == "借阅量") {
        getYearNewAddBrowsingSA().then((res) => {

            ishomeLineReftwoTitle.value = "档案借阅量趋势统计图"
            ishomeLineReftwo.value = false
            initBarChart2(res.data);

        })
    }
    if (val == "馆藏资料") {
        GetYearNewAddGetSA().then((res) => {
            ishomeLineRefOne.value = false
            ishomeLineRefOneTitle.value = "馆藏资料年度新增统计"
            initBarChart1(res.data);

        })

    }

}
// 批量设置 echarts resize
const initEchartsResizeFun = () => {
    nextTick(() => {
        for (let i = 0; i < state.myCharts.length; i++) {
            setTimeout(() => {
                (<any>state.myCharts[i]).resize();
            }, i * 1000);
        }
    });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
    window.addEventListener('resize', initEchartsResizeFun);
};





//获取所属行业数据
const getprofession = async () => {
    const { data } = await getProfession()
    state.professionData = <any>data
}
// 页面加载时
onMounted(() => {
    initEchartsResize();
    getprofession()
});
// 由于页面缓存原因，keep-alive
onActivated(() => {
    initEchartsResizeFun();
});
// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
watch(
    () => isTagsViewCurrenFull.value,
    () => {
        initEchartsResizeFun();
    }
);
// 监听 vuex 中是否开启深色主题
watch(
    () => themeConfig.value.isIsDark,
    (isIsDark) => {
        nextTick(() => {
            state.charts.theme = isIsDark ? 'dark' : '';
            state.charts.bgColor = isIsDark ? 'transparent' : '';
            state.charts.color = isIsDark ? '#dadada' : '#303133';

            onSubmit()


        });
    },
    {
        deep: true,
        immediate: true,
    }
);
console.log("sss");


</script>
<style lang='scss' scoped>
.home-card-item {
    height: 340px;
    width: 100%;
    overflow: hidden;
    background: white;
}
</style>